<template>
	<view class="goodsDetail">
		<view class="detailImg">
			<u-swiper name="file_url" @click="clickImg" mode="number" :autoplay="false"
			img-mode="scaleToFill" indicator-pos="topLeft" :height="swiperHeight"
			:list="goodsInfo.image"></u-swiper>

		</view>
		<view v-if="goodsInfo.q_id<=4" class="price_box" style="background: url(https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/price_normal_bg.png) no-repeat;background-size: 100% 100%;">
			<view class="price_txt" v-if="goodsInfo.q_id==1">
				<view>¥<text class="sale_price">{{goodsInfo.goods_sku.goods_price}}</text><!-- 首购价 --></view>
				<!-- <view>¥<text>{{goodsInfo.goods_sku.line_price}}</text>复购价</view> -->
			</view>
			<view class="price_txt" v-else-if ="goodsInfo.q_id==2">
				<view v-if="goodsInfo.goods_sku.points>0">¥<text class="sale_price">{{goodsInfo.goods_sku.price}}+{{goodsInfo.goods_sku.points}}</text>券</view>
				<view v-else>¥<text class="sale_price">{{goodsInfo.goods_sku.price}}</text></view>
			</view>
			<view class="price_txt" v-else-if="goodsInfo.q_id==3">
				<!-- <view>¥<text>19.9</text><text class="market_price">市场价:<text class="line-through">{{goodsInfo.goods_sku.market_price}}</text></text></view> -->
				<view v-if="goodsInfo.goods_sku.points>0">¥<text class="sale_price">{{goodsInfo.goods_sku.price}}+{{goodsInfo.goods_sku.points}}</text>券<text class="market_price">市场价:<text class="line-through">{{goodsInfo.goods_sku.market_price}}</text></text></view>
				<view v-else>¥<text class="sale_price">{{goodsInfo.goods_sku.price}}</text><text class="market_price">市场价:<text class="line-through">{{goodsInfo.goods_sku.market_price}}</text></text></view>
			</view>
			<view class="price_txt" v-else-if ="goodsInfo.q_id==4">
				<view v-if="goodsInfo.goods_sku.points>0">¥<text class="sale_price">{{goodsInfo.goods_sku.price}}+{{goodsInfo.goods_sku.points}}</text>券</view>
				<view v-else>¥<text class="sale_price">{{goodsInfo.goods_sku.price}}</text></view>
			</view>
			<view v-if="goodsInfo.show_stock == 1" style="font-size: 25rpx;">已售:{{goodsInfo.goods_sales}}件</view>
			<view class="hd_tips">

				<text v-for="(item, index) in goodsInfo.hdtips" class="ht_tips_item" :key="index">
					<text v-if="index=='shtx'">随</text>
					<text v-if="index=='cxhd'">促</text>
					<text v-if="index=='pin'">拼</text>
				</text>
			</view>
		</view>
		<view class="goods_info">
			<view style="display: flex;">
				<view class="goods_tit" style="width: 100%;">{{goodsInfo.goods_name}}</view>
				<view class="share_right" @click="saveCollection()">
					<u-image width="44" height="44" :src="shareImg" :mode="widthFix"></u-image>
					<!-- <view class="text u-line-1">分享</view> -->
				</view>
			</view>
			<view class="goods_remark">{{goodsInfo.selling_point}}</view>
		</view>

		<view class="norms">
			<text style="color: #909399;margin-right: 20rpx;">规格</text>
			<text @click="showGoodsPopup(3)">请选择规格</text>
		</view>
		<view class="norms">
			<text style="color: #909399;margin-right: 20rpx;">服务</text>
			<view v-for="(item, index) in goodsDetailInfo.services" :key="index">
				<image :src="item.icon"></image>
				<text>{{item.name}}</text>
			</view>
			<text v-if="goodsInfo.hdtips && goodsInfo.hdtips.pin">不退不换</text>
		</view>
		<!-- <view class="norms">
			<text style="color: #909399;margin-right: 20rpx;">优惠券</text>
			<text @click="clickCoupon">可用优惠券<text class="goods_remark">2</text>张</text>
		</view> -->
		<view style="padding-bottom: 200rpx;">
			<u-sticky>
				<u-tabs active-color="#20cbd4" :list="tabsList" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</u-sticky>
			<view style="width: 100%;">
				<view v-if="current==0"><u-parse :html="htmlNode"></u-parse></view>
			</view>

			<view v-if="current==1">
				<empty v-if="isEmpty" :emptyImg="emptyImg" :emptyTxt="emptyTxt"></empty>
				<view v-if="!isEmpty" class="commentItem" v-for="(item, index) in commentList" :key="index">
					<view class="userInfo">
						<view class="userInfo">
							<u-avatar size="mini" :src="item.user.head_img"></u-avatar>
							<text>{{item.user.name}}</text>
						</view>
						<u-rate :size="40" :count="5" :disabled="true" v-model="item.score" :min-count="1" active-color="#ffba00"></u-rate>
					</view>
					<view style="margin-top: 20rpx;">{{item.content}}</view>
					<view class="commentImg" v-if="item.is_picture == 1">
						<image v-for="(item1, index1) in item.image" :key="index1" :src="item1.file.file_url"></image>
					</view>
				</view>
				<u-loadmore v-if="!isEmpty" :status="status" color="#909399"/>
				<!-- <view class="allBtn" v-if="!isEmpty">
					<u-button :custom-style="customStyle" hover-class="none" shape="circle" size="medium" plain>查看全部</u-button>
				</view> -->

			</view>
		</view>

		<view class="navigation">
			<view class="left">
				<view class="item" v-for="(item, index) in footerList" :key="index" @click="iconClick(index)">
					<image style="width: 40rpx;height: 40rpx;" :src="item.icon"></image>
					<view class="text u-line-1">{{item.name}}</view>
				</view>
				<!-- <view class="item" @click="sendClick" v-if="goodsInfo.q_id==3">
					<image style="width: 40rpx;height: 40rpx;" :src="shareBtn.icon"></image>
					<view class="text u-line-1">送礼</view>
				</view>
				<view class="item" @click="shareClick" v-else>
					<image style="width: 40rpx;height: 40rpx;" :src="shareBtn.icon"></image>
					<view class="text u-line-1">{{shareBtn.name}}</view>
				</view> -->
			</view>
				<view class="right">
					<view class="cart btn u-line-1" @click="showGoodsPopup(1)" v-if="!goodsInfo.hdtips || !goodsInfo.hdtips.pin">加入购物车</view>
					<view class="buy btn u-line-1" @click="showGoodsPopup(2)">立即购买</view>
				</view>
		</view>

		<u-popup class="jumpMini" borderRadius="10" :closeable="true" :maskCloseAble="false" mode="center" v-model="showMini">
			<view class="min-wrap"><u-image class="min-qr" width="360" height="360" src="/static/mini1.jpg"></u-image></view>
			<view class="min-text">长按识别或者下载微信扫一扫</view>
		</u-popup>

		<u-popup class="giftConfirm" mode="bottom" v-model="showConfirmPopup">
			<view class="popHead">
				<view class="msgLeft" @click="confirmBackClick">上一步</view>
				<view class="msgTitle">请确认您的送礼规则</view>
				<view class="msgClose" @click="confirmCloseClick"><u-icon name="close"></u-icon></view>
			</view>
			<view class="gift-form" v-if="showConfirmPopup">
				<view class="gift-form-row">
					<view class="label">购买数量</view>
					<view>{{giftTotalNumber}}个</view>
				</view>
				<view class="gift-form-row">
					<view class="label">每人限领</view>
					<view>{{giftPerNumber}}个</view>
				</view>
				<view class="gift-form-row">
					<view class="label">领取限时</view>
					<view>{{giftHour}}时{{giftMinute}}分</view>
				</view>
				<view class="gift-form-row">
					<view class="label">我对朋友说</view>
					<view>{{giftMessage}}</view>
				</view>
			</view>
			<view class="gift-next" @click="createGift">生成送礼计划</view>
		</u-popup>

		<u-popup class="giftMessage" mode="bottom" v-model="showMessagePopup">
			<view class="popHead">
				<view class="msgLeft" @click="messageBackClick">上一步</view>
				<view class="msgTitle">我想对朋友说的</view>
				<view class="msgClose" @click="messageCloseClick"><u-icon name="close"></u-icon></view>
			</view>
			<view class="msgContent">
				<textarea
				    class="msgTextarea"
				    :value="giftMessage"
					:focus="true"
					:autoFocus="true"
				    :cursor="cursor"
					:bottom="bottom"
				    :showConfirmBar="false"
				    :adjustPosition="false"
					cursorSpacing="140"
					placeholder="请输入消息内容"
				    @keyboardheightchange="keyboardheightchange"
				></textarea>
			</view>
			<view class="gift-next" @click="confirmSendMessage">下一步</view>
			<view class="popBottom" :style="{height:bottom}"></view>
		</u-popup>

		<u-popup class="goodsPopup" mode="bottom" :border-radius="30"  v-model="showSendPopup">
			<view class="goodsInfoPop">
				<image :src="file_url"></image>
				<view class="infoRight">
					<view class="goods_tit u-line-2">{{goodsInfo.goodsName}}</view>
					<view class="pricebox_pop">
						<view class="pricePop">¥19.9
							<block v-if="(goodsInfo.q_id == 2 ||goodsInfo.q_id == 3||goodsInfo.q_id == 4) && point>0">+{{point}}券</block>
						</view>
						<view v-if="goodsInfo.show_stock == 1">库存{{stock}}件</view>
						<view v-else>
							<block v-if="stock>0">库存充足</block>
							<block v-else>库存不足</block>
						</view>
					</view>
				</view>
			</view>
			<view v-if="goodsInfo.spec_type == 2" class="norm_item" v-for="(item, index) in skuList" :key="index">
				<view class="goods_tit">{{item.group_name}}</view>
				<u-radio-group v-model="item.title" shape="square" active-color="#20cbd4">
					<u-radio
						v-for="(item1, index1) in item.spec_items" :key="index1" :name="item1.spec_value" @change="normChange(index,index1,item1.spec_value)">
						{{item1.spec_value}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="gift-form">
				<view class="gift-form-row">
					<view class="label">购买数量</view>
					<view>
						<u-number-box v-if="stock>0" color="#20cbd4" :step="1" :min="buymin" :value="buymin" :max="buymax" v-model="giftTotalNumber"></u-number-box>
						<u-number-box v-else :disabled="true" color="#20cbd4" :step="1" :min="buymin" :value="buymin" :max="buymax" v-model="giftTotalNumber"></u-number-box>
					</view>
				</view>
				<view class="gift-form-row">
					<view class="label">每人限领</view>
					<view>
						<u-number-box v-if="stock>0" color="#20cbd4" :step="1" :min="buymin" :value="buymin" :max="buymax" v-model="giftPerNumber"></u-number-box>
						<u-number-box v-else :disabled="true" color="#20cbd4" :step="1" :min="buymin" :value="buymin" :max="buymax" v-model="giftPerNumber"></u-number-box>
					</view>
				</view>
				<view class="gift-form-row">
					<view class="label">领取限时</view>
					<view @click="timeClick">
						<text>{{giftHour}}时{{giftMinute}}分</text>
					</view>
				</view>
			</view>
			<view class="gift-next" @click="confirmSendNum">下一步</view>
		</u-popup>
		<u-picker mode="multiSelector" v-model="showTime"  :default-selector='[0, 0]' :range="multiSelector" @confirm="timeConfirm"></u-picker>

		<u-popup class="goodsPopup" mode="bottom" :border-radius="30"  v-model="showPopup">
			<scroll-view scroll-y="true" style="max-height: 600rpx;">
				<view class="goodsInfoPop">
					<image :src="file_url"></image>
					<view class="infoRight">
						<view class="goods_tit u-line-2">{{goodsInfo.goodsName}}</view>
						<view class="pricebox_pop">
							<view class="pricePop">¥{{price}}
								<block v-if="(goodsInfo.q_id == 2||goodsInfo.q_id == 3||goodsInfo.q_id == 4) && point>0">+{{point}}券</block>
								<view class="goodsBuymin" v-if="buymin>1">起购数：{{buymin}}</view>
							</view>
							<view v-if="goodsInfo.show_stock == 1">库存{{stock}}件</view>
							<view v-else>
								<block v-if="stock>0">库存充足</block>
								<block v-else>库存不足</block>
							</view>
						</view>
					</view>
				</view>
				<view v-if="goodsInfo.spec_type == 2" class="norm_item" v-for="(item, index) in skuList" :key="index">
					<view class="goods_tit">{{item.group_name}}</view>
					<u-radio-group v-model="item.title" shape="square" active-color="#20cbd4">
						<u-radio
							v-for="(item1, index1) in item.spec_items" :key="index1" :name="item1.spec_value" @change="normChange(index,index1,item1.spec_value)">
							{{item1.spec_value}}
						</u-radio>
					</u-radio-group>
				</view>
			</scroll-view>
			<view class="pop_num">
				<view class="goods_tit">购买数量</view>
				<view>
					<u-number-box v-if="stock>0" color="#20cbd4" :step="step" :min="buymin" :value="buymin" :max="buymax" v-model="popNumber"></u-number-box>
					<u-number-box v-else :disabled="true" color="#20cbd4" :step="step" :min="buymin" :value="buymin" :max="buymax" v-model="popNumber"></u-number-box>
				</view>
			</view>
			<view class="confrim-btn">
				<u-button @click="confrimClick" :custom-style="confrimStyle" hover-class="none" shape="circle" plain>确定</u-button>
			</view>
		</u-popup>
		<u-popup v-model="showModel" mode="center" width="675rpx" height="1120rpx" :border-radius="20">
			<view class="myextension" style="width:675rpx; height: 1080rpx;">
				<view class="loading">
					<u-loading mode="circle" size="60"></u-loading>
					<view class="loading-text">海报加载中</view>
				</view>
				<block class="mycanvas">
					<image class="imgs" style="width:675rpx; height: 1080rpx;z-index: 1000;" :src="imgUrl" mode="aspectFill"></image>
				</block>
				<!-- #ifdef APP-PLUS -->
				<view class="saveImg" @tap="saveImg" style="background:#20cbd4;z-index: 2000;">保存海报</view>
				<view class="saveImg1" @tap="changeCode" style="background:#20cbd4;z-index: 2000;">{{btnMsg}}</view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<button v-if="album" class="saveImg" type='primary' open-type="openSetting" style="z-index: 9999;z-index: 2000;">去授权</button>
				<view class="saveImg" @tap="saveImg" style="background:#20cbd4;z-index: 9999;z-index: 2000;">保存海报</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view v-if="plusapp" class="saveImg" @tap="saveImgPlus" style="background:#20cbd4;z-index: 2000;">保存海报</view>
				<p v-if="!plusapp" class="tips" style ="z-index: 2000;">长按图片进行保存</p>
				<!-- #endif -->
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<login-model ref="loginModel"></login-model>
		<hoverMenu></hoverMenu>
		<u-modal v-model="modelShow" title="授权提醒" content="还未授权微信支付,是否授权？" @confirm="authorization" :show-cancel-button="true"></u-modal>
		<u-modal v-model="show" :show-title="false" content="商品已下架" confirm-text="返回" confirm-color="#20cbd4" @confirm="goback"></u-modal>
	</view>
</template>

<script>
	import {goodsDetail,collect,addCart,commentList,isLogin,goodsBanner,createGift} from "@/common/api.js";
	import loginModel from "@/components/public/loginModel.vue";
	import empty from "@/components/public/empty.vue";
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	export default {
		components: {
			empty,
			loginModel,
			hoverMenu
		},
		data() {
			return {
				showSendPopup: false,
				showMessagePopup: false,
				showConfirmPopup: false,
				bottom: 0,
				plusapp: false,
				multiSelector: [],
				showTime: false,
				giftPerNumber: 1,
				giftTotalNumber: 1,
				giftMessage: '我在YTHeart为你挑选了一件礼物，希望你喜欢！',
				giftHour: 0,
				giftMinute: 0,
				buymin:1,
				buymax:9999,
				step:1,
				album:false,
				modelShow:false,
				avatarList:[],
				isEmpty:false,
				showMini:false,
				emptyImg:getApp().globalData.imageUrl+"empty_goods.png",
				emptyTxt:"暂无评价信息～",
				goodsInfo:{},
				file_url:"",//规格中图片
				price:0,//规格中的价格
				stock:999,//规格中的库存
				point:0,//规格中的券(优选区)
				htmlNode:"",//商品详情
				commentList:[],//评论列表
				goodsDetailInfo:{},
				swiperHeight:600,
				footerList:[
					{icon:"/static/tabbar/tab_home_sel.png",name:"首页"},
					{icon:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/10001/20210824/20fc559ed3c0dc5599f3a2606250c2c3.png",name:"客服"},
					{icon:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/share.png",name:"分享"},
				],
				shareBtn: {
					icon:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/share.png",
					name:"分享"
				},
				tabsList: [{
					name: '商品详情'
				},{
					name: '用户评价'
				}],
				current: 0,
				customStyle:{
					color:"#20cbd4",
					border:"5rpx #20cbd4",
					marginBottom:"10rpx"
				},
				confrimStyle:{
					color:"#f5fdfe",
					border:"5rpx #20cbd4",
					background:"#20cbd4",
					marginBottom:"10rpx"
				},
				showPopup:false,
				popupType:1,
				popNumber:1,
				skuList:[],
				ids:"",//规格选中的ids
				goodsNorms:"",//规格选中的名称
				status: 'loadmore',
				pageSize: 10,
				pageStart: 1,
				total:0,
				showModel:false,
				imgUrl:"", //分享图片
				show:false,
				btnType:0,
				btnMsg:"转为小程序码",
				shareImg:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/favorite.png"
			}
		},
		created() {
			let multiSelector = []
			let hour = []
			for(let i = 0; i <= 23; i++){
				hour.push(i+'时')
			}
			multiSelector.push(hour)
			let minute = []
			for(let i = 0; i <= 59; i++){
				minute.push(i+'分')
			}
			multiSelector.push(minute)
			this.multiSelector = multiSelector
			if(navigator.userAgent.indexOf("Html5Plus") > -1) {
				this.plusapp = true
			}
		},
		onLoad(option) {
			// #ifdef MP
			this.btnType=1;
			// #endif
			console.log(option,'option',Date.now());

			if(option.scene){
				let scene = decodeURIComponent(option.scene)
				if(scene.indexOf('&')>0){
					let qs = scene.split('&')
					let query = []
					qs.forEach((value)=>{
						let kv = value.split('=')
						query[kv[0]] = kv[1]
					})
					if(query['goods_id']){
						option.goods_id = query['goods_id']
					}
					if(query['spread_code']){
						option.spread_code = query['spread_code']
					}
					if(query['sp_code']){
						option.spread_code = query['sp_code']
					}
				}
			}

			//设置轮播图高度
			this.setSwiperHeight();
			this.selectGoodsInfo(option.goods_id);
			if(option.spread_code){
				uni.setStorageSync('spread_code', option.spread_code);
			}
			if(option.custom_params){
				var custom_params=decodeURIComponent(option.custom_params);
				var costom_data=JSON.parse(custom_params);
				if(costom_data.roomid){
					uni.setStorageSync('roomid', costom_data.roomid);
					uni.setStorageSync('roomtime', Date.now());
				}
				if(costom_data.spread_code){
					uni.setStorageSync('spread_code', costom_data.spread_code);
				}
				console.log(costom_data,custom_params,'custom_params');
			}
		},
		onHide() {
			this.album=false
		},
		onReachBottom() {
			if(this.current == 1){
				if(this.total/(this.pageStart*this.pageSize)>1){
					this.pageStart++;
					this.selectCommentList();
				}else{
					this.status = 'nomore';
				}
			}
		},
		methods: {
			keyboardheightchange(e) {
				console.log(e)
				this.bottom = e.target.height + 'px';
				console.log(this.bottom)
			},
			timeConfirm(val){
				this.giftHour = val[0]
				this.giftMinute = val[1]
			},
			timeClick(){
				this.showTime = true
			},
			sendClick(){
				this.showSendPopup = true
			},
			confirmSendNum(){
				if(this.giftHour===0 && this.giftMinute===0){
					this.$u.toast("请选择领取限时")
					return
				}
				if(this.giftPerNumber > this.giftTotalNumber) {
					this.$u.toast("每人限领数不能大于总数")
					return
				}
				this.showSendPopup = false
				this.showMessagePopup = true
			},
			messageBackClick(){
				this.showSendPopup = true
				this.showMessagePopup = false
			},
			messageCloseClick(){
				this.showMessagePopup = false
			},
			confirmSendMessage(){
				if(this.giftMessage===''){
					this.$u.toast("请填写留言内容")
					return
				}
				this.showMessagePopup = false
				this.showConfirmPopup = true
			},
			confirmBackClick(){
				this.showMessagePopup = true
				this.showConfirmPopup = false
			},
			confirmCloseClick(){
				this.showConfirmPopup = false
			},
			createGift(){
				uni.setStorageSync('gift_message', this.giftMessage);
				createGift(this,{goods_id:this.goodsInfo.goods_id,total_num:this.giftTotalNumber,per_num:this.giftPerNumber,hour:this.giftHour,minute:this.giftMinute,msg:this.giftMessage})
			},
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			selectGoodsInfo(goods_id){
				goodsDetail(this,{goods_id:goods_id});
			},
			setSwiperHeight(){
				let _this = this;
				_this.swiperHeight = uni.getSystemInfoSync().screenWidth*2;
			},
			dealGoodsHd(data){
				var goodsInfo=this.goodsInfo;
				if(goodsInfo.hdtips && typeof(goodsInfo.hdtips['pin'])!='undefined'){
					var pin_extra=goodsInfo.hdtips['pin'].extra;
					var rules=pin_extra.rules;
					if(rules&&(rules.buy_min||rules.buy_max)){
						if(rules.buy_min>0){
							this.buymin=rules.buy_min;
						}
						if(rules.buy_max>0){
							this.buymax=rules.buy_max;
						}
					}
				}
			},
			//评论
			selectCommentList(){
				commentList(this,{page:this.pageStart,limit:this.pageSize,goods_id:this.goodsInfo.goods_id});
			},
			setFrom(html) {
				//处理富文本 让图片居中适应
				let newContent = html.replace(/\<img/gi, '<img class="rich-img" ');
				this.htmlNode = newContent
			},
			clickImg(index){
				let that=this;
				var img = [];
				for(var i in that.goodsInfo.image){
					img.push(that.goodsInfo.image[i].file_url)
				}
				// 预览图片
				uni.previewImage({
					urls: img,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
						    that.saveImg(img[data.index],that)
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			saveImgPlus(){
				let picurl = this.imgUrl
				plus.nativeUI.toast("正在保存");
				let dtask = plus.downloader.createDownload(picurl, {}, function (d, status) {
					if (status == 200) {
						//d.filename
						plus.gallery.save(d.filename, function () {
							plus.nativeUI.toast("保存成功");
						}, function (e) {
							plus.nativeUI.toast("保存失败，请重试！");
						});
					} else {
						plus.nativeUI.toast("保存失败，请重试！");
					}
				});
				dtask.start();
			},
			saveImg(url,that){
				uni.downloadFile({
					url:url,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									icon: true
								});
							}
						});
					}
				});
			},
			clickCoupon(){
				uni.navigateTo({
				  url: '/goods/coupon'
				});
			},
			change(index) {
				this.current = index;
				if(index == 1){
					this.pageStart = 1;
					this.commentList = [];
					this.selectCommentList();
				}
			},
			iconClick(index){
				if(index==0){
					uni.switchTab({
						url:"/pages/tabBar/home"
					})
				}else if(index==1){
					let goods_name = this.goodsInfo.goods_name
					let goods_image = this.goodsInfo.goods_image
					let goods_price = this.goodsInfo.q_id == 1 ? this.goodsInfo.goods_sku.goods_price:this.goodsInfo.goods_sku.price
					let goods_no = "goods"+this.goodsInfo.goods_id
					//客服
					uni.navigateTo({
						url:"/pages/views/showhfive?goods_name="+goods_name+"&goods_image="+this.goodsInfo.goods_image+"&goods_price="+goods_price+"&goods_no="+goods_no
					})
				}else if(index==2){
					//分享
					isLogin(this,{type:3});
					goodsBanner(this,{goods_id:this.goodsInfo.goods_id,type:this.btnType})
				}
			},
			shareClick(){
				isLogin(this,{type:3});
				goodsBanner(this,{goods_id:this.goodsInfo.goods_id,type:this.btnType})
			},
			//分享
			share(){
				isLogin(this,{type:3});
				goodsBanner(this,{goods_id:this.goodsInfo.goods_id,type:this.btnType})
			},
			changeCode(){
				this.imgUrl=""
				if(this.btnType == 0){
					this.btnType = 1
					this.btnMsg = "转为二维码"
				}else{
					this.btnType = 0
					this.btnMsg = "转为小程序码"
				}
				goodsBanner(this,{goods_id:this.goodsInfo.goods_id,type:this.btnType})
			},
			//收藏
			saveCollection(){
				collect(this,{goods_id:this.goodsInfo.goods_id,category:this.goodsInfo.category_id,q_id:this.goodsInfo.q_id});
			},
			authorization(){
				uni.navigateTo({
					url:"/pages/views/authorization?state="+this.goodsInfo.goods_id,
					success() {
						this.$u.toast("未授权微信公众号支付，请点击授权")
					}
				})
			},
			//index:1=加入购物车；2=立即购买/立即秒杀/单独购买；3=选择规格；4=我要开团
			showGoodsPopup(index){
				if(this.goodsInfo.q_id==2 || this.goodsInfo.q_id==3){
					// this.showMini = true
					// return;
				}


				// #ifdef H5
					// let ua = window.navigator.userAgent.toLowerCase()
					// if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					// 	if(uni.getStorageSync("openidGzh")==null||uni.getStorageSync("openidGzh")==""){
					// 		this.modelShow=true
					// 	}
					// }
				// #endif
				isLogin(this,{type:2});
				this.popupType=index;
				if(this.goodsInfo.spec_type == 1){
					if(this.goodsInfo.q_id == 1){
						this.price = this.goodsInfo.goods_sku.goods_price;//规格中的价格
					}else if(this.goodsInfo.q_id == 2){
						this.price = this.goodsInfo.goods_sku.price;//规格中的价格
						this.point = this.goodsInfo.goods_sku.points;//规格中的券(优选区)
						this.market_price = this.goodsInfo.goods_sku.market_price;
					}else if(this.goodsInfo.q_id == 3){
						// this.price = 19.9;//规格中的价格
						this.price = this.goodsInfo.goods_sku.price;//规格中的价格
						this.point = this.goodsInfo.goods_sku.points;//规格中的券(福利区)
						this.market_price = this.goodsInfo.goods_sku.market_price;
					}else if(this.goodsInfo.q_id == 4){
						this.price = this.goodsInfo.goods_sku.price;//规格中的价格
						this.point = this.goodsInfo.goods_sku.points;//规格中的券(优选区)
						that.market_price = spec_list[m].form.market_price;
					}
					this.stock = this.goodsInfo.goods_sku.stock_num;//规格中的库存
					this.ids = this.goodsInfo.goods_sku.spec_sku_id;
				}
			},
			normChange(groupIdx,redioIdx,redioName){
				this.skuList[groupIdx].title=redioName;
				this.skuList[groupIdx].spec_items[redioIdx].is_check=true;
				for(var i=0;i<this.skuList[groupIdx].spec_items.length;i++){
					if(this.skuList[groupIdx].title!=this.skuList[groupIdx].spec_items[i].spec_value){
						this.skuList[groupIdx].spec_items[i].is_check=false;
					}
				}
				this.changePrice();
			},
			//处理价格
			changePrice(){
				var that = this;
				var flag = true;
				//如果存在规格未选中的值，直接返回
				for (var i in that.skuList) {
					if (that.skuList[i].title == '') {
						flag = false;
						return; //如果数组里有为空的值，那直接返回true
					}
				}
				if(flag){
					//把选中的id放在数组中
					var ids = [];
					var goodsNorms = [];
					for (var i in that.skuList) {
						for (var j in that.skuList[i].spec_items) {
							if(that.skuList[i].spec_items[j].is_check == true){
								ids.push(that.skuList[i].spec_items[j].item_id)
								goodsNorms.push(that.skuList[i].spec_items[j].spec_value)
							}
						}
					}

					that.goodsNorms = goodsNorms;
					//把逗号变为下划线
					var id = ids.toString().replace(",","_");
					that.ids = id;
					var spec_list = that.goodsInfo.goods_multi_spec.spec_list;
					for(var m in spec_list){
						if(spec_list[m].spec_sku_id == id){
							if(that.goodsInfo.q_id == '1'){
								that.price = spec_list[m].form.goods_price;
							}else if(that.goodsInfo.q_id == '2'){
								that.price = spec_list[m].form.price;
								that.point = spec_list[m].form.point;
								that.market_price = spec_list[m].form.market_price;
							}else if(that.goodsInfo.q_id == '3'){
								// that.price = 19.9;
								that.price = spec_list[m].form.price;
								that.point = spec_list[m].form.point;
								that.market_price = spec_list[m].form.market_price;
							}else if(that.goodsInfo.q_id == '4'){
								that.price = spec_list[m].form.price;
								that.point = spec_list[m].form.point;
								that.market_price = spec_list[m].form.market_price;
							}
							that.stock = spec_list[m].form.stock_num;
						}
					}
				}
			},
			confrimClick(){
				if(this.goodsInfo.spec_type == 2){
					for(var i=0;i<this.skuList.length;i++){
						if(this.skuList[i].title==''){
							this.$refs.uToast.show({title: '请选择'+this.skuList[i].group_name+'规格'});
							return;
						}
					}
				}

				let buymin = this.buymin
				let step = this.step
				let cur = this.popNumber
				if(cur<buymin){
					this.$refs.uToast.show({title: '最低购买'+buymin+'件'});
					return;
				}
				let m = parseInt((cur-buymin)/step)
				if(step*m!=(cur-buymin)){
					this.$refs.uToast.show({title: '每次增加数为'+step+'的倍数'});
					return;
				}

				this.showPopup=false;
				if(this.popNumber>this.stock){
					this.$refs.uToast.show({title: '库存不足'});
					return;
				}
				if(this.popupType==1){
					addCart(this,{type:1,goods_id:this.goodsInfo.goods_id,goods_sku_id:this.ids,goods_num:this.popNumber,updateType:0});
				}else if(this.popupType==2){
					var _that=this;
					setTimeout(function(){
						var obj={};
						obj.goods_id=_that.goodsInfo.goods_id;
						obj.goods_sku_id=_that.ids;
						obj.goods_num=_that.popNumber;
						obj.price=_that.price;
            obj.q_id = _that.goodsInfo.q_id;
						obj.type=0;
						uni.navigateTo({
						  url: '/goods/confrimOrder?param='+JSON.stringify(obj)
						});
					},200);
				}else if(this.popupType==3){
					console.log("选择规格,数量为"+this.popNumber)
				}
			},
			saveImg() {
				//保存图片
				uni.showLoading({
					title: '保存中...'
				});
				let _this = this;
				// #ifdef MP
				uni.getSetting({
					success(res) {
						console.log(_this.imgUrl)
						uni.getImageInfo({
							src:_this.imgUrl,
							success(res) {
								var path=res.path;
								uni.saveImageToPhotosAlbum({
									filePath: path,
									success(re) {
										uni.hideLoading();
										uni.showToast({
											title: '保存成功',
											icon: 'success'
										});
									},
									fail(err) {
										_this.album=true
										console.log(JSON.stringify(err))
										uni.showToast({
											title: '未授权',
											icon: 'none'
										});
									}

								});
							},
						})
					}
				});
				// #endif
				// #ifdef APP-PLUS
				setTimeout(() => {
					uni.saveImageToPhotosAlbum({
						filePath: this.imgUrl,
						success(re) {
							uni.hideLoading();
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							});
						},
						fail(err) {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							});
						}

					});
				}, 1000);
				// #endif
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
	.detailImg{
		/* height: 600rpx; */
	}
	.price_box{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 30rpx;
	}
	.hd_tips{}
	.hd_tips .ht_tips_item{display:inline-block;background-color: red;min-width:50rpx;height:50rpx;line-height:49rpx;color:#fff;text-align: center;margin-left:10rpx;border-radius: 6rpx;}
	.price_txt{
		display: flex;
	}
	.price_txt view{
		font-size: 25rpx;
		margin-right: 20rpx;
	}
	.price_txt text{
		margin: 0 10rpx;
		/* font-size: 40rpx; */
		font-size: 600;
	}
	.sale_price{
		font-size: 40rpx;
	}
	.u_price{
		text-decoration: line-through;
		line-height: 70rpx;
	}
	.goods_info{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
	}
	.goods_tit{
		font-size: 30rpx;
		margin-bottom: 15rpx;
	}
	.share_right{
		float: right;
	}
	.goods_remark{
		color: #0e595d;
	}
	.norms{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
	}
	.norms view{
		display: flex;
		align-items: center;
	}
	.norms view image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 5rpx;
		margin-left: 10rpx;
	}
	.commentItem{
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}
	.userInfo{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.userInfo text{
		margin-left: 20rpx;
		color: #909399;
	}
	.reply{
		background-color: #f6f6f6;
		padding: 10rpx;
		border-radius: 10rpx;
	}
	.allBtn{
		text-align: center;
	}
	.goodsInfoPop{
		display: flex;
		padding: 20rpx 30rpx;
	}
	.goodsInfoPop image{
		width: 150rpx;
		height: 150rpx;
	}
	.infoRight{
		margin-left: 10rpx;
		width: 530rpx;
	}
	.pricebox_pop{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #909399;
	}
	.pricePop{
		font-size: 40rpx;
		color: #FA3534;
	}
	.norm_item{
		padding: 20rpx 30rpx;
	}
	.confrim-btn{
		padding: 0 50rpx;
	}
	.pop_num{
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pintuanBtn{
		line-height: 36rpx;
		padding: 0 30rpx;
		border-radius: 36rpx;
		color: #ffffff;
		text-align: center;
	}
	.commentImg{
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}
	.commentImg image{
		width: 150rpx;
		height: 150rpx;
		margin-right: 10rpx;
	}
	.model_box{
		padding: 20rpx;
	}
	.model_title{
		font-size: 30rpx;
		font-weight: 700;
		padding: 0 0 10rpx;
	}
	.model_item{
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		border-bottom:1rpx solid #e4e7ed;
	}
	.model_remark{
		font-size: 22rpx;
		margin-top: 10rpx;
		color: #909399;
	}
</style>
<style lang="scss" scoped>
	.goodsBuymin{
		color: #525252;
		font-size: 24rpx;
	}
.navigation {
	display: flex;
	margin-top: 100rpx;
	background-color: #ffffff;
	padding: 16rpx 16rpx;
	width: 750rpx;
	position: fixed;
	bottom: 0;
	z-index: 10;
	justify-content: space-between;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
			text-align: center;
		}
		.cart {
			background: linear-gradient(90deg,#676869,#525252);
			margin-right: 30rpx;
		}
		.buy {
			background: linear-gradient(90deg,#13797f,#20cbd4);
		}
		.seckill {
			background: linear-gradient(93deg,#d01325,#ed3c30);
			width: 350rpx;
		}
	}
}
	.myextension {
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.myextension image {
		display: block;
	}

	.saveImg {
		width: 300rpx;
		height: 80rpx;
		border-radius: 40rpx;
		box-shadow: 0 10rpx 10rpx #ddd;
		background-color: #20cbd4;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		margin: 0 auto;
		bottom: 10rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.saveImg1 {
		width: 300rpx;
		height: 80rpx;
		border-radius: 40rpx;
		box-shadow: 0 10rpx 10rpx #ddd;
		background-color: #20cbd4;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		margin: 0 auto;
		top: 900rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.mycanvas {
		margin: 0 auto;
		transform: translateY(30upx);
		border-radius: 10upx;
		overflow: hidden;
	}

	.imgs {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 10upx;
		overflow: hidden;
	}
	.tips{
		text-align: center;
		color: #999;
		font-size: 24rpx;
		bottom: 10rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.market_price{
		color:#303133;
		font-size: 24rpx;
	}
	.line-through{
		font-size: 24rpx;
		text-decoration:line-through;
	}
	.loading{
		text-align: center;
		margin-top: 500rpx;
		.loading-text{
			font-size: 24rpx;
			color: #676869;
			margin-top: 20rpx;
		}
	}
	.gift-form{
		margin-bottom: 30rpx;
		margin-top: 10rpx;
	}
	.gift-form-row{
		display: flex;
		align-items: center;
		height: 70rpx;
		padding: 0 25rpx;
		.label{
			flex: 1;
			min-width: 200rpx;
		}
	}
	.gift-next{
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: #20cbd4;
		color: #FFFFFF;
		font-weight: bold;
	}

</style>
<style lang="scss" scoped>
	.popHead{
		display: flex;
		height: 70rpx;
		align-items: center;
		padding: 0 15rpx;
		background-color: #efefef;
		.msgLeft{
			width: 100rpx;
			color: #20cbd4;
		}
		.msgClose{
			width: 100rpx;
			text-align: right;
		}
		.msgTitle{
			flex: 1;
			text-align: center;
			color: #666;
		}
	}
	.msgContent{
		height: 200rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		margin-right: 20rpx;
		.msgTextarea{
			width: 100%;
			height: 100%;
		}
	}
	.min-wrap{
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #ffffff;
		width: 500rpx;
		height: 500rpx;
		box-sizing: border-box;
		padding: 70rpx;
	}
	.min-text{
		text-align: center;
		padding: 30rpx 0 50rpx 0;
		font-size: 32rpx;
	}
</style>
